import type { FC } from 'react';
import { memo } from 'react';
import type { CanvasSize } from '../types';
import { ProFormText } from '@ant-design/pro-components';
import EditModal, { type EditModalProps } from '../EditModal';
import { patternMoreThan0Integer } from '@/utils/formRule';

type Props = EditModalProps<CanvasSize> & {
  initialValues: Record<string, any>;
}

const EditCanvasSize: FC<Props> = (props) => {
  return (
    <EditModal
      {...props}
      title="扩展画布"
      width={360}
    >
      <ProFormText
        label="x轴"
        name="cols"
        required
        allowClear={false}
        rules={[
          { required: true },
          patternMoreThan0Integer
        ]}
      />
      <ProFormText
        label="y轴"
        name="rows"
        required
        allowClear={false}
        rules={[
          { required: true },
          patternMoreThan0Integer
        ]}
      />
    </EditModal>
  );
}

export default memo(EditCanvasSize);
